import axios from 'axios';
import React, { useEffect, useRef, useState } from 'react'
import { Button, Form, Input, Modal, Table } from 'antd'
import { DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons'
// 在Modal组件中将confirm确认框解构出来
const { confirm } = Modal;


export default function NewsCategory() {

  // 存储Table表格组件需要的数据
  const [dataSource, setdataSource] = useState([])

  // 决定Modal组件是否显示
  const [open, setOpen] = useState(false)

  // 存储Form表单组件下表单项的内容
  const [valueList, setvalueList] = useState('')

  // 通过addForm可以获取到Form表单组件的实例
  const addFrom = useRef(null)

  // 获取新闻分类
  useEffect(() => {
    axios.get('/categories', {
      params: {}
    }).then((res) => {
      // console.log(res.data)
      setdataSource(res.data)
    })
  }, [])

  // 创建表格并设置表头
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      render: (id) => {
        return <b>{id}</b>
      }
    },
    {
      title: '分类名称',
      dataIndex: 'label',
      key: 'title',
    },
    {
      title: '操作',
      render: (item) => {
        return <Button 
                  danger 
                  type="primary" 
                  shape="circle" 
                  icon={<DeleteOutlined onClick={() => { confirmMethod(item) }} />} 
               />
      }
    },
  ]

  // 添加类型功能的Button组件点击后的事件回调
  const IncreaseOfType = () => {
    // // 让Modal弹出框组件显示
    setOpen(true)
  }

  // 点击Modal弹出框组件中的取消按钮的点击事件回调
  const onCancel = () => {
    // 让Modal弹出框组件隐藏
    setOpen(false)
  }

  // 添加类型功能的Button组件点击后显示的弹出框Modal组件中的确认按钮点击的事件回调
  const onOk = () => {
    addFrom.current.validateFields().then(value => {
      // 让弹出框Modal组件消失
      setOpen(false)

      // 利用addForm获取到Form组件实例，Form表单组件内容重置
      addFrom.current.resetFields()

      if (valueList !== '') {
        axios.post(`/categories`, {
          "label": valueList,
          "value": valueList
        }).then(ret => {
          setdataSource([...dataSource, ret.data])
        })
      }

    }).catch(err => {

    })
  }

  // 获取输入框的value值
  const showInpValue = e => {
    setvalueList(e.target.value);
  }

  // 点击删除功能的Button组件后的事件回调
  const confirmMethod = (item) => {
    // 弹出确认框
    confirm({
      title: '你确定要删除?',
      icon: <ExclamationCircleOutlined />,
      cancelText: "取消",
      onOk() {
        deleteMethod(item)
      },
      onCancel() {

      },
    })
  }

  // 删除功能
  const deleteMethod = (item) => {
    setdataSource(dataSource.filter(data => data.id !== item.id))
    axios.delete(`/categories/${item.id}`)
  }

  return (
    <div>
      <Button 
        style={{ marginBottom: "20px" }} 
        type="primary" 
        onClick={() => {
          IncreaseOfType()
        }}
      >
        添加类型
      </Button>

      {/* 弹出框组件 */}
      <Modal
        open={open}
        title="添加用户"
        okText="确定"
        cancelText="取消"
        onCancel={onCancel}
        onOk={() => {
          onOk()
        }}
      >

        <Form ref={addFrom} layout="vertical">
          <Form.Item
            label="新闻类型"
            name="新闻类型"
            rules={[{ required: true, message: '请输入您的新闻类型' }]}
          >
            <Input value={valueList} onChange={showInpValue} />
          </Form.Item>
        </Form>

      </Modal>

      {/* 表格 */}
      <Table 
        dataSource={dataSource} 
        columns={columns} 
        pagination={{ pageSize: 6 }} 
        rowKey={item => item.id} 
      />

    </div>
  )
}
